<template>
  <view>
    <u-navbar :title="title"></u-navbar>
    <view class="top_title" v-if="sta == 3">
      <view class="top_title_left">{{$t('100星石可以在开盒支付时抵扣1元')}}</view>
      <view class="top_title_right" @click="xsOpen"><uni-icons class="top_title_right_icon" type="help"
          size="16" /><text>{{$t('使用规则')}}</text></view>
    </view>
    <uni-popup ref="xsPopup" type="center">
      <view class="help_view">
        <view class="help_box_title">{{$t('星石使用规则')}}</view>
        <view class="help_box_item">
          <text class="help_box_item_ask">Q：{{$t('如何获取星石')}}？</text>
          <text class="help_box_item_answer">{{$t('参与平台活动可获得星石')}}</text>
        </view>
        <view class="help_box_item">
          <text class="help_box_item_ask">Q：{{$t('如何使用星石')}}？</text>
          <text class="help_box_item_answer">{{$t('星石用于开盒时抵扣支付金额')}}</text>
          <text class="help_box_item_answer">{{$t('不同盲盒的星石抵扣比例不同')}}</text>
          <text class="help_box_item_answer active">{{$t('若盲盒订单产生退款')}}</text>
          <text class="help_box_item_answer">{{$t('星石不可转让')}}</text>
        </view>
        <view class="help_box_btn" @click="xsClose">{{$t('知道了')}}</view>
      </view>
    </uni-popup>
    <uni-popup ref="xybPopup" type="center">
      <view class="help_view">
        <view class="help_box_title">{{$t('幸运币使用规则')}}</view>
        <view class="help_box_item">
          <text class="help_box_item_ask">Q：{{$t('如何获取幸运币')}}？</text>
          <text class="help_box_item_answer">{{$t('开盒后可将不想提货的商品兑换为幸运币')}}</text>
        </view>
        <view class="help_box_item">
          <text class="help_box_item_ask">Q：{{$t('如何使用幸运币')}}？</text>
          <text class="help_box_item_answer">{{$t('幸运币可用于平台商城的商品兑换')}}</text>
          <text class="help_box_item_answer">{{$t('幸运币一旦兑换')}}</text>
        </view>
        <view class="help_box_btn" @click="xybClose">{{$t('知道了')}}</view>
      </view>
    </uni-popup>
    <view class="wrap">
      <view class="top">
        <view>
          <view class="tit">
            {{ sta == 1 ? $t('可用余额') : sta == 3 ? $t('星石总额') :  $t('幸运币总额')}}
          </view>
          <view class="num">
            {{ num }}
          </view>
        </view>
        <uni-icons class="help" v-if="sta == 2" color="#e3e1e1" type="help" size="18" @click="xybOpen" />
      </view>

      <view class="billbox">
        <view class="title">{{ sta == 1 ? $t('可用余额') : sta == 3 ? $t('星石') : $t('幸运币')}}{{$t('明细')}}<text class="tip">（{{$t('仅保留半年记录')}}）</text></view>
      </view>

      <view class="billList">
        <view class="list" v-for="(item, idx) in list" :key="idx">
          <view class="tit">{{ item.create_time }}</view>
          <view class="bill n-flex-row n-justify-between">
            <view>{{ item.remarks }}</view>
            <view class="shu" v-if="item.change_type == 1">
              +{{ item.number }}
            </view>
            <view class="shu" v-if="item.change_type == 2">
              -{{ item.number }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-empty :text="$t('暂无记录')" mode="list" :show="show" margin-top="200"></u-empty>
	<view class="flexd-button" v-if="sta == 2">
		<view class="flexd-button-btn" @click="$.to('/pagesA/pages/my/lucky_chongzhi')">{{$t('幸运币充值')}}</view>
 <!--     <view class="flexd-button-btn" @click="$.to('/pagesA/pages/my/lucky_withdrawal')">{{$t('幸运币提现')}}</view> -->
    </view>
    <!-- <button class="btn" @click="$.to('/pagesA/pages/my/withdrawal')" v-if="sta == 1">申请提现</button> -->
    <view class="flexd-button-vh"></view>
    <view class="flexd-button" v-if="sta == 1">
    <!--  <view class="flexd-button-btn" @click="$.to('/pagesA/pages/my/withdrawal')">{{$t('申请提现')}}</view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      page: 1,
      sta: "",
      num: "0",
      list: [],
      show: true,
    };
  },
  // 触底
  onReachBottom() {
    console.log("触底22222222");
    if (this.list.length < this.page * 10) {
      return;
    }
    this.page++;
    this.get_money_log(this.sta);
  },
  onLoad(option) {
    this.sta = option.sta;
    if (option.sta == 1) {
      this.title = this.$t('可用余额');
      this.get_money_log(1);
    } else if (option.sta == 3) {
      this.title = this.$t('星石');
      this.get_money_log(3);
    } else {
      this.title = this.$t('幸运币');
      this.get_money_log(2);
    }
  },
  onShow() {
  	if (!uni.getStorageSync("user")) {
  		uni.redirectTo({
  			url:'/pages/my/login'
  		})
  	}
  },
  methods: {
    //星石弹窗
    xsOpen() {
      this.$refs.xsPopup.open();
    },
    xsClose() {
      this.$refs.xsPopup.close();
    },
    //幸运币弹窗
    xybOpen() {
      this.$refs.xybPopup.open();
    },
    xybClose() {
      this.$refs.xybPopup.close();
    },
    get_money_log(type) {
      if (!uni.getStorageSync("user")) {
        return;
      }
      this.$http({
        url: "api/member/money_log",
        data: {
          page: this.page,
          type: type,
        },
      })
        .then((res) => {
          console.log(res, "");
          if (res.data.code == 1) {
            if (res.data.data.list.length == 0) {
              this.show = true;
            } else {
              this.show = false;
            }
            this.list = this.list.concat(res.data.data.list);
            this.num = Number(res.data.data.num).toFixed(2);
          }
        })
        .catch((err) => { });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f3f8fc;
}

.top_title {
  width: 100%;
  height: 65rpx;
  line-height: 65rpx;
  font-size: 26rpx;
  padding: 0 25rpx;
  background-color: #dff8fc;
  color: #314144;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  .top_title_right_icon {
    vertical-align: bottom;
  }
}

.help_view {
  width: 500rpx;
  padding: 35rpx;
  background-color: #fff;
  box-sizing: border-box;
  margin: 20% auto 0;

  .help_box_title {
    color: #141f1e;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }

  .help_box_item {
    margin-top: 25rpx;
    font-size: 26rpx;
    text-align: left !important;

    .help_box_item_ask {
      color: #222426;
      display: block;
      font-weight: bold;
    }

    .help_box_item_answer {
      margin-top: 14rpx;
      color: #b1b1b4;
      display: block;
    }

    .help_box_item_answer::before {
      content: " ";
      background-color: #c2c2c4;
      border-radius: 50%;
      display: inline-block;
      height: 6rpx;
      width: 6rpx;
      margin-right: 12rpx;
      margin-top: -6rpx;
      vertical-align: middle;
    }

    .active {
      color: #53baac;
    }
  }

  .help_box_btn {
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    color: #0e2c2f;
    font-weight: bold;
    background-color: #33e0de;
    margin-top: 50rpx;
  }
}

.wrap {
  padding: 20rpx;
  box-sizing: border-box;
  max-height: calc(100vh - 300rpx);
  /* overflow: hidden; */
  /* overflow-y: auto; */
}

.top {
  background: url(https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/qh.png);
  background-size: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  height: 200rpx;
  justify-content: center;
  color: #fff;
  position: relative;

  .help {
    position: absolute;
    top: 25rpx;
    right: 25rpx;
  }
}

.num {
  font-weight: bold;
  font-size: 46rpx;
  margin-top: 20rpx;
}

.billbox {
  margin-top: 20rpx;

  .title {
    .tip {
      font-size: 24rpx;
      color: #d0d4d6;
    }
  }
}

.billList .list {
  margin-top: 10rpx;
  background-color: #fff;
  border-radius: 4rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.list .tit {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #efefef;
}

.bill {
  padding: 30rpx 0 10rpx;
}

.bill .shu {
  color: #05b2b5;
  font-weight: bold;
}

.flexd-button-vh {
  height: 140rpx;
  width: 750rpx;
}

.flexd-button {
  padding-bottom: 50rpx;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 750rpx;
  box-sizing: border-box;
}

.flexd-button-btn {
  width: 710rpx;
  height: 80rpx;
  left: 20rpx;
  bottom: 40rpx;
  background-color: #2ac2b3;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rpx;
}
</style>
